<template>
  <el-row type="flex" class="wrap">
    <el-col :span="24">
      <div class="grid-content bg-purple-dark">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item
            label="昵称"
            prop="nickName"
            :rules="[
      { required: true, message: '昵称不能为空'},
    ]"
          >
            <el-input v-model="ruleForm.nickName"></el-input>
          </el-form-item>
          <el-form-item
            label="用户名"
            prop="name"
            :rules="[
      { required: true, message: '用户名不能为空'},
    ]"
          >
            <el-input v-model="ruleForm.name"></el-input>
          </el-form-item>
          <el-form-item
            label="密码"
            prop="pass"
          >
            <el-input
              type="password"
              v-model="ruleForm.pass"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="确认密码"
            prop="checkPass"
          >
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="手机号"
            prop="num"
            :rules="[
      { required: true, message: '手机号不能为空'},
      { type: 'number', message: '手机号必须为数字'}
    ]"
          >
            <el-input
              type="num"
              v-model.number="ruleForm.num"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="手机号验证码"
            prop="numCode"
            :rules="[
      { required: true, message: '验证码不能为空'},
      { type: 'number', message: '验证码必须为数字'}
    ]"
          >
            <el-input
              type="numCode"
              v-model.number="ruleForm.numCode"
            ></el-input>
            <el-button>获取验证码</el-button>
          </el-form-item>
          <el-form-item
            prop="email"
            label="邮箱"
            :rules="[
      { required: true, message: '请输入邮箱地址', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ]"
          >
            <el-input v-model="ruleForm.email"></el-input>
          </el-form-item>
          <el-form-item
            label="邮箱验证码"
            prop="emailCode"
            :rules="[
      { required: true, message: '验证码不能为空'},
      { type: 'number', message: '验证码必须为数字'}
    ]"
          >
            <el-input
              type="emailCode"
              v-model.number="ruleForm.emailCode"
            ></el-input>
            <el-button>获取验证码</el-button>
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              @click="submitForm('ruleForm')"
            >注册</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-col>
  </el-row>

</template>

<script>
export default {
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.pass) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        nickName: "",
        pass: "",
        checkPass: "",
        email: "",
        num: "",
        emailCode: "",
        numCode: ""
      },
      rules: {
        pass: [{ validator: validatePass, trigger: "blur" }],
        checkPass: [{ validator: validatePass2, trigger: "blur" }]
      }
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          let obj = {
            userName: this.ruleForm.name,
            nickname: this.ruleForm.nickName,
            password: this.ruleForm.pass,
            email: this.ruleForm.email,
            telephone: this.ruleForm.num,
            emailCode: this.ruleForm.emailCode,
            telephoneCode: this.ruleForm.numCode
          };
          this.$axios.post('/register/registerUser',obj).then(res=>{
            this.$message({
            message: res.message,
            type: "success"
          });
          })
        } else {
          this.$message({
            message: "警告哦，请检查输入信息",
            type: "warning"
          });
          return false;
        }
      });
    }
  }
};
</script>

<style>
.wrap{
  width: 50rem;
  position: absolute;
  top: 10rem;
  left: 35rem;
  box-shadow: darkgrey 10px 10px 30px 5px ;
  border-radius: 8px;
}
</style>
